<template>
  <div class="frequently">
  <div class="bg-dark text-white font-sans">
    <!-- FAQ Hero 区域 -->
    <section class="relative pt-24 pb-16 bg-darker">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h1 class="text-4xl md:text-5xl font-bold mb-4">常见问题</h1>
          <p class="text-gray-400 max-w-2xl mx-auto">我们整理了用户最常问的问题，希望能帮助您更好地了解我们的产品和服务</p>
        </div>

        <!-- 搜索框 -->
        <div class="max-w-2xl mx-auto mb-16">
          <div class="relative">
            <input
              type="text"
              placeholder="搜索常见问题..."
              id="faq-search"
              class="w-full px-6 py-4 bg-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
              v-model="searchQuery"
            />
            <button
              class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary"
              @click="searchFAQ"
            >
              <i class="fa fa-search"></i>
            </button>
          </div>
        </div>

        <!-- 分类标签 -->
        <div class="flex flex-wrap justify-center gap-4 mb-12">
          <button
            class="px-6 py-2 rounded-full bg-primary text-white text-sm font-medium"
            @click="filterFAQ('all')"
          >
            全部
          </button>
          <button
            v-for="category in categories"
            :key="category"
            class="px-6 py-2 rounded-full bg-card hover:bg-primary/20 text-white text-sm font-medium transition-colors"
            @click="filterFAQ(category)"
          >
            {{ category }}
          </button>
        </div>
      </div>
    </section>

    <!-- FAQ 内容区域 -->
    <section class="py-20 bg-dark">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
          <div v-for="(faqGroup, index) in filteredFAQs" :key="index">
            <div class="mb-12">
              <h2 class="text-2xl font-bold mb-6 text-primary">{{ faqGroup.category }}</h2>
              <div
                v-for="(faq, faqIndex) in faqGroup.questions"
                :key="faqIndex"
                class="bg-card rounded-xl mb-4 overflow-hidden"
              >
                <button
                  class="faq-question w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none"
                  @click="toggleFAQ(faqGroup.category, faqIndex)"
                >
                  <span class="font-semibold text-lg">{{ faq.question }}</span>
                  <i
                    :class="{ 'faq-toggle text-primary transition-transform duration-300 active': faq.isOpen }"
                  >
                    <i class="fa fa-chevron-down"></i>
                  </i>
                </button>
                <div
                  :class="{ 'faq-content px-6 pb-5 active': faq.isOpen }"
                  v-html="faq.answer"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
    </div>
</template>

<script>
// 原文件第10 - 25行的 Tailwind 配置
const tailwindConfig = {
  theme: {
    extend: {
      colors: {
        primary: '#48b6ff',
        secondary: '#2e6cf1',
        dark: '#080812',
        darker: '#04040a',
        card: '#1a1a31'
      },
      fontFamily: {
        sans: ['Segoe UI', 'sans-serif'],
      },
    }
  }
};

// 初始化 Tailwind 配置
if (typeof window !== 'undefined' && window.tailwind) {
  window.tailwind.config = tailwindConfig;
}
export default {
  name: "FrequentlyView",
  data() {
    return {
      isMobileMenuOpen: false,
      searchQuery: '',
      categories: ['产品功能', '价格套餐', '技术支持', '账户管理'],
      faqs: [
        {
          category: '产品功能',
          questions: [
            {
              question: '狂速科技SAAS支持哪些平台的小程序开发？',
              answer: `狂速科技SAAS支持主流平台的小程序开发，包括微信小程序、支付宝小程序、抖音小程序、百度小程序等。我们的系统采用一次开发多端部署的架构，您只需在我们的平台上进行一次开发，即可同时发布到多个平台，大大降低开发成本和时间。`,
              isOpen: false
            },
            {
              question: '是否支持自定义小程序的界面设计？',
              answer: `是的，我们提供强大的可视化编辑器，支持完全自定义的界面设计。您可以通过拖放组件、调整样式和布局来创建符合您品牌形象的小程序界面。同时，我们也提供丰富的模板库，您可以根据自己的需求选择合适的模板进行修改，快速搭建您的小程序。`,
              isOpen: false
            },
            {
              question: '狂速科技SAAS提供哪些数据分析功能？',
              answer: `我们的数据分析功能提供全面的用户行为和业务数据监控。您可以查看小程序的访问量、用户留存率、页面停留时间等用户行为数据，以及订单量、销售额、客单价等业务数据。同时，我们还提供数据报表导出、数据趋势分析等功能，帮助您做出更明智的业务决策。`,
              isOpen: false
            }
          ]
        },
        {
          category: '价格套餐',
          questions: [
            {
              question: '不同套餐之间有什么区别？',
              answer: `我们提供基础版、专业版和企业版三种套餐，主要区别在于支持的平台数量、功能完整性、存储空间和技术支持级别。基础版适合初创企业，提供单平台小程序和基础功能；专业版适合中小企业，支持多平台部署和高级功能；企业版则提供全平台支持和企业级定制功能。您可以在我们的<a href="pricing.html" class="text-primary hover:underline">套餐价格</a>页面查看详细对比。`,
              isOpen: false
            },
            {
              question: '是否有免费试用期？',
              answer: `是的，我们提供14天的免费试用，让您可以在购买前充分体验我们的产品功能。试用期内，您可以使用专业版的全部功能，无需提供信用卡信息。试用期结束后，如果您决定继续使用，可以选择适合您的套餐进行付费。`,
              isOpen: false
            },
            {
              question: '付费后可以升级或降级套餐吗？',
              answer: `当然可以。您可以随时升级或降级您的套餐，升级时系统会根据剩余时间按比例计算差价，降级时则会将差价退还到您的账户余额。套餐变更将在下一个计费周期生效，您当前的服务不会受到影响。`,
              isOpen: false
            }
          ]
        },
        {
          category: '技术支持',
          questions: [
            {
              question: '如何获取技术支持？',
              answer: `我们提供多种技术支持渠道：
              <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-400">
                <li>在线客服：您可以在工作日9:00-18:00通过网站在线客服与我们联系</li>
                <li>客服热线：拨打400-888-XXXX获取电话支持</li>
                <li>邮箱支持：发送邮件至support@yunchuangsaas.com，我们会在24小时内回复</li>
                <li>帮助中心：您可以在我们的帮助中心查找常见问题的解答和使用教程</li>
              </ul>
              企业版用户还可以享受专属客户经理和优先技术支持服务。`,
              isOpen: false
            },
            {
              question: '系统的稳定性和可用性如何？',
              answer: `我们承诺提供99.9%的系统可用性，采用多机房热备、负载均衡和自动故障转移等技术确保系统稳定运行。我们的系统每天进行数据备份，并设有灾备中心，确保数据安全。如果出现系统故障，我们的技术团队将立即响应并尽快恢复服务。`,
              isOpen: false
            },
            {
              question: '是否提供小程序上线审核协助？',
              answer: `是的，我们提供小程序上线审核协助服务。我们的团队会帮助您检查小程序是否符合各平台的审核规范，提供审核不通过的解决方案，并指导您完成小程序的提交和发布流程。企业版用户还可以享受专属的审核绿色通道，加快审核速度。`,
              isOpen: false
            }
          ]
        },
        {
          category: '账户管理',
          questions: [
            {
              question: '如何修改账户信息和密码？',
              answer: `登录您的账户后，点击右上角的头像，选择"账户设置"，您可以在这里修改您的个人信息、联系方式和密码。如果您忘记了密码，可以点击登录页面的"忘记密码"，通过注册邮箱重置密码。`,
              isOpen: false
            },
            {
              question: '是否可以添加多个管理员账号？',
              answer: `是的，专业版和企业版支持添加多个管理员账号，并可以为不同的管理员分配不同的权限。您可以在账户设置的"团队管理"页面添加新的管理员，并设置他们的访问权限，如内容管理、数据分析、用户管理等。`,
              isOpen: false
            }
          ]
        }
      ]
    };
  },
  computed: {
    filteredFAQs() {
      if (this.searchQuery === '') {
        return this.faqs;
      }
      const query = this.searchQuery.toLowerCase();
      return this.faqs.map(faqGroup => ({
        category: faqGroup.category,
        questions: faqGroup.questions.filter(faq =>
          faq.question.toLowerCase().includes(query) || faq.answer.toLowerCase().includes(query)
        )
      })).filter(faqGroup => faqGroup.questions.length > 0);
    }
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    searchFAQ() {
      // 搜索功能已通过计算属性实现
    },
    filterFAQ(category) {
      if (category === 'all') {
        return this.faqs;
      }
      return this.faqs.filter(faqGroup => faqGroup.category === category);
    },
    toggleFAQ(category, index) {
      const faqGroup = this.faqs.find(fg => fg.category === category);
      if (faqGroup) {
        faqGroup.questions[index].isOpen = !faqGroup.questions[index].isOpen;
      }
    }
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }
  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }
  .faq-toggle {
    transition: transform 0.3s ease;
  }
  .faq-toggle.active {
    transform: rotate(180deg);
  }
  .faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }
  .faq-content.active {
    max-height: 1000px;
  }
}

:root {
  --primary: #48b6ff;
  --secondary: #2e6cf1;
  --dark: #080812;
  --darker: #04040a;
  --card: #1a1a31;
}

body {
  background-color: var(--dark);
  color: white;
  font-family: 'Segoe UI', sans-serif;
}
</style>
